
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串的扩展</title>
</head>
<body>

    <div id="box">

        <!-- <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul> -->

    </div>

     <!-- 
        1.模板字符串：
            模板字符串主要用来解决字符串拼接的问题
            语法：使用 `` 反引号包裹
            特点：${} ,在模板字符串可以引用变量、调用函数、运算、换行；
            原理： 用正则表达式来实现
     -->

    <!-- 
        2.字符串新增方法：
            includes
            语法：字符串.startsWidth( 参数字符 )
            描述：检测当前字符串中是否包含有指定的子串

            startsWith
            语法：字符串.startsWidth( 参数字符 )
            描述：参数字符串是否在原字符串的头部

            endsWith
            语法：字符串.endsWidth( 参数字符 )
            描述：参数字符串是否在原字符串的尾部

            repeat
            语法：字符串.repeat( num )
            描述：返回一个新字符串，表示将原字符串重复n次

            padStart
            语法：字符串.padStart( 目标长度，填充的字符 )
            描述：字符串头部补全

            padEnd
            语法：字符串.padEnd( 目标长度，填充的字符 )
            描述：字符串尾部补全
            ........................
            ................................
     -->


    <script>
        // 模板字符串的原理实现   了解
        let name="张三",age="18";
        // let desc=`${name} 今年  ${age}  岁了`;
        let desc="${name} 今年  ${age}  岁了";
        // console.log(desc)
        function replace(desc){
            // 原理部分  
            return desc.replace(/\$\{([^}]+)\}/g,function(mathed,key,c,d){
                    console.log(mathed,key,c,d)
                    //${name} name 0 ${name} 今年  ${age}  岁了
                    //${age} age 12 ${name} 今年  ${age}  岁了
                    //replace中 mathed 为匹配到的字符串，key为对应替换的字符串，c为替换的位置，d为整个要替换的字符串。
                    return eval(key);
                    //eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。这里的eval会将原本的name和age改成成张三和18
            })
        }

        console.log(replace(desc))





        document.getElementById("box").innerHTML = `
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        `

        let  x=10,y=20;
        console.log(`${x}+${y} = ${x+y}`);
        let obj = {a:10,b:20}
        console.log(`${obj.a}+${obj.b} = ${obj.a+obj.b}`);
        function fn() {
            return  "hello 2410 students";
            
        }

        console.log(`${fn()}`);


        
//     let  url = "http://www.baidu.com/index.html/123123";
// // // 以。。开头
//     if (url.startsWith("http://")) {
//         console.log("普通的网址")
//     } else if(url.startsWith("https://")){//ssl  套接字
//         console.log("加密验证的网址")
//     }else if(url.startsWith("git://")){//码云
//         console.log("git的网址")
//     }else if(url.startsWith("svn://")){
//         console.log("svn的网址")
//     }
//     else {
//         console.log("其他的网址")
//     }




//     let str = "1.css";
// // 以。。结尾
//     if (str.endsWith(".jpg")) {
//         console.log("jpg的图片")
//     } else if(str.endsWith(".json")){//ssl  套接字
//         console.log("json的数据")
//     }else if(str.endsWith(".txt")){//码云
//         console.log("文本文件")
//     }else if(str.endsWith(".css")){
//         console.log("样式文件")
//     }
//     else {
//         console.log("其他结尾的文件")
//     }


        let str = "hello world"
        console.log(str.includes("hello"));

        console.log('hello'.repeat(2));
        
        console.log("x".padStart(5,"ab"));
        console.log("x".padEnd(5,"ab"));
        

        let s = "   hello  world   "
        console.log(s.trim());
        console.log(s.trimStart());
        console.log(s.trimEnd());
        
        console.log(s.trimLeft());
        console.log(s.trimRight());
        

        

        

    </script>
    
</body>
</html>